<script setup lang="ts">
// Define the emits
import { computed } from 'vue'

const emit = defineEmits(['subscribe', 'analysis', 'close'])
// Define the props
const props = defineProps({
  url: String,
  Step: Number,
  rules: Array as () => Array<(v: string) => boolean | string>,
})

defineOptions({
  inheritAttrs: false,
})

const isRssValid = computed(() => {
  if (props.url === undefined || props.url === null) return false
  if (props.rules === undefined || props.rules === null) return false

  return props.rules.every((rule) => rule(props.url))
})

// Define the methods
const handlerSubscribe = () => {
  emit('subscribe')
}

const analysisRss = () => {
  emit('analysis')
}

const closeDialog = () => {
  emit('close')
}
</script>

<template>
  <v-btn
    v-show="props.Step === 1"
    class="ml-auto"
    height="60"
    width="80"
    text="订阅"
    color="#9FBB00"
    @click="handlerSubscribe"
    style="outline: none"
  ></v-btn>
  <v-btn
    v-show="props.Step === 0"
    class="ml-auto"
    height="60"
    width="80"
    text="解析"
    color="#9FBB00"
    :disabled="!isRssValid"
    style="outline: none"
    @click="analysisRss"
  ></v-btn>
  <v-btn
    class="ml-auto"
    height="60"
    width="80"
    text="关闭"
    color="red"
    style="outline: none"
    @click="closeDialog"
  ></v-btn>
</template>

<style scoped></style>
